<script type="text/javascript">
$(function () {
	$(".position_main").height($(window).height());
	$('.content_text').slimScroll({
		height:'500px',
		railVisible: true,
		color:'#646673',
		size:'12px',
		railOpacity: 1,
		alwaysVisible: true
	});
	$('.chzn-results').slimScroll({
		height:'140px',
		railVisible: true,
		color:'#578414',
		size:'12px',
		railOpacity: 1,
		alwaysVisible: true
	});
	$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
<div class="content">
	<h2>
		Thông tin chuyến đi
	</h2>

	<div class="content_text">
		<table class="trip_info content_form " width="100%">
			<tr>
				<td><input type="text" name="ten-nguoi-dang" value="Tên người đăng" onfocus="if (this.value=='Tên người đăng'){this.value=''}" onblur="if (this.value=='') {this.value='Tên người đăng'}" /></td>
				<td>	
					<input type="text" name="noi-khoi-hanh" value="Nơi khởi hành" onfocus="if (this.value=='Nơi khởi hành'){this.value=''}" onblur="if (this.value=='') {this.value='Nơi khởi hành'}" />
					<!-- <select data-placeholder="Nơi khởi hành" name="noi-khoi-hanh" tabindex="1" class="chzn-select" style="width: 178px;" >
						<option value=""></option>
						<option value="Hà Nội">Hà Nội</option>
						<option value="Đà Nẵng">Đà Nẵng</option>
						<option value="Đồng Nai">Đồng Nai</option>
						<option value="Tp. Hồ Chí Minh">Tp. Hồ Chí Minh</option>
						<option value="Bình Định">Bình Định</option>
						<option value="Nam Định">Nam Định</option>
						<option value="Cần Thơ">Cần Thơ</option>
						<option value="Vũng Tàu">Vũng Tàu</option>
						<option value="Hải Phòng">Hải Phòng</option>
						<option value="Vinh">Vinh</option>
						<option value="Bình Thuận">Bình Thuận</option>
						<option value="Vĩnh Long">Vĩnh Long</option>
						<option value="Đồng Tháp">Đồng Tháp</option>
						<option value="Nha Trang">Nha Trang</option>
					</select> -->
				</td>
				<td>
					<input type="text" name="noi-sap-di-den" value="Nơi sắp đi đến" onfocus="if (this.value=='Nơi sắp đi đến'){this.value=''}" onblur="if (this.value=='') {this.value='Nơi sắp đi đến'}" />
					<!-- <select data-placeholder="Nơi sắp đi đến" name="noi-sap-di-den" tabindex="1" class="chzn-select" style="width: 178px;" >
						<option value=""></option>
						<option value="Hà Nội">Hoàng Diệu, Vĩnh Nguyên, Nha Trang</option>
						<option value="Đà Nẵng">But I must explain to you how all</option>
						<option value="Đồng Nai">Nor again is there anyone who loves</option>
						<option value="Tp. Hồ Chí Minh">But in certain circumstances and owing</option>
						<option value="Bình Định">Nam libero tempore, cum soluta nobis</option>
						<option value="Nam Định">These cases are perfectly simple</option>
					 --></select>
				</td>
				<td><input id="datepicker" type="text" name="ngay-khoi-hanh" value="Ngày khởi hành" onfocus="if (this.value=='Ngày khởi hành'){this.value=''}" onblur="if (this.value=='') {this.value='Ngày khởi hành'}" /></td>
			</tr>
			<?php if(isset($trip)) :?>
			<?php
				// $this->widget('zii.widgets.CListView', array(
				//     'dataProvider'=>$trip,
				//     // 'itemView'=>'_post',   // refers to the partial view named '_post'
				//     'sortableAttributes'=>array(
				//         'sort' => 'start_date DESC',
				//         'create_time'=>'Post Time',
				//     ),
				// )); 
			?>
				<?php foreach($trip as $value) :?>
					<tr class="list">
						<td><label><a href="<?php echo Yii::app()->createUrl('news/details',array('id' => $value['id'])); ?>"><?php echo $value['user']['name']; ?></a></label></td>
						<td><label><a href="<?php echo Yii::app()->createUrl('news/details',array('id' => $value['id'])); ?>"><?php echo $value['current_location']; ?></a></label></td>
						<td class="trip_des"><label><a href="<?php echo Yii::app()->createUrl('news/details',array('id' => $value['id'])); ?>"><?php echo $value['future_location']; ?></a></label></td>
						<td><label><a href="<?php echo Yii::app()->createUrl('news/details',array('id' => $value['id'])); ?>"><?php echo date("d/m/Y", strtotime($value['start_date'])); ?></a></label></td>
					</tr>
				<?php endforeach; ?>
			<?php endif; ?>
		</table>
	</div>
</div>
<script src="<?php echo Yii::app()->theme->baseUrl; ?>/front/js/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
	'.chzn-select'           : {},
	'.chzn-select-deselect'  : {allow_single_deselect:true},
	'.chzn-select-no-single' : {disable_search_threshold:10},
	'.chzn-select-no-results': {no_results_text:'Không có kết quả phù hợp!'},
	'.chzn-select-width'     : {width:"95%"}
}
for (var selector in config) {
	$(selector).chosen(config[selector]);
}
</script>
<script>
function Filter()
{
	var nameFilter = document.getElementById("nameFilter").value.toLowerCase();
	$("tr.list").each(function(){
		var ten_nguoi_dang = $(this).find("a:eq(0)").html();
		var noi_khoi_hanh = $(this).find("a:eq(1)").html();
		var noi_sap_di_den = $(this).find("a:eq(2)").html();
		var ngay_khoi_hanh = $(this).find("a:eq(3)").html();
		$(this).find("a:eq(0):not(:contains(" + nameFilter + "))" ).parent().parent().parent().hide();
		$(this).find("a:eq(0):contains(" + nameFilter + ")" ).parent().parent().parent().show();
	})
}

$("input[name='ten-nguoi-dang']").keyup(function(){
	var searchKey = $(this).val().toLowerCase();
	searchKey = locdau(searchKey);


	$("table.trip_info.content_form tr.list").each(function(index){

		var content = $(this).find("td:eq(0) a").html().toLowerCase();
		content = locdau(content);
		if(content.indexOf(searchKey) != -1){
			$(this).show();
		}else{
			$(this).hide();
		}

	});
});

$("input[name='noi-khoi-hanh']").keyup(function(){
	var searchKey = $(this).val().toLowerCase();
	searchKey = locdau(searchKey);


	$("table.trip_info.content_form tr.list").each(function(index){

		var content = $(this).find("td:eq(1) a").html().toLowerCase();
		content = locdau(content);
		if(content.indexOf(searchKey) != -1){
			$(this).show();
		}else{
			$(this).hide();
		}

	});
});

$("input[name='noi-sap-di-den']").keyup(function(){
	var searchKey = $(this).val().toLowerCase();
	searchKey = locdau(searchKey);


	$("table.trip_info.content_form tr.list").each(function(index){

		var content = $(this).find("td:eq(2) a").html().toLowerCase();
		content = locdau(content);
		if(content.indexOf(searchKey) != -1){
			$(this).show();
		}else{
			$(this).hide();
		}

	});
});

$("input[name='ngay-khoi-hanh']").keyup(function(){
	var searchKey = $(this).val().toLowerCase();
	searchKey = locdau(searchKey);


	$("table.trip_info.content_form tr.list").each(function(index){

		var content = $(this).find("td:eq(3) a").html().toLowerCase();
		content = locdau(content);
		if(content.indexOf(searchKey) != -1){
			$(this).show();
		}else{
			$(this).hide();
		}

	});
});


function locdau(str) {
  str= str.toLowerCase();
  str= str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g,"a");
  str= str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g,"e");
  str= str.replace(/ì|í|ị|ỉ|ĩ/g,"i");
  str= str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g,"o");
  str= str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g,"u");
  str= str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g,"y");
  str= str.replace(/đ/g,"d");
  str= str.replace(/!|@|%|\^|\*|\(|\)|\+|\=|\<|\>|\?|\/|,|\.|\:|\;|\'| |\"|\&|\#|\[|\]|~|$|_/g,"-");
/* tìm và thay thế các kí tự đặc biệt trong chuỗi sang kí tự - */
  str= str.replace(/-+-/g,"-"); //thay thế 2- thành 1-
  str= str.replace(/^\-+|\-+$/g,"");
//cắt bỏ ký tự - ở đầu và cuối chuỗi
  return str;
} 

</script>